<template>
  <el-dialog
    title="添加部门单位"
    top="150px"
    :visible.sync="addDept"
    :close-on-press-escape="false"
    :close-on-click-model="false"
    :before-close="closeModel"
    append-to-body>
    <hr class="boundary">
    <el-form :label-position="labelPosition" label-width="90px">
      <el-form-item label="部门名称" prop="dept">
        <el-input v-model="name"></el-input>
      </el-form-item>
    </el-form>
    <hr class="boundary">
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeModel">取 消</el-button>
      <el-button type="primary" @click="clickAdd">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      addDept: Boolean
    },
    data () {
      return {
        showDept: false,
        labelPosition: 'left',
        name: '',
        dept: ''
      }
    },
    rules: {
        dept: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ]
    },
    methods: {
      closeModel () {
        this.showDept = false
        this.name = ''
        this.$emit('showBrandsList')
        this.$emit('closeModel')
      },
      clickAdd () {
        let self = this
        let deptName = self.name
        console.log(self.name)
        $.ajax({
          type: 'POST',
          url: this.api + 'department',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          dataType: 'json',
          data: {'department': deptName},
          success (data) {
            console.log(data)
            if (data == true) {
              self.$message({
                message: '部门名称添加成功！',
                type: 'success'
              })
              self.closeModel()
            } else if (data.status === 1) {
              self.$message({
                message: '该部门已被添加！',
                type: 'warning'
              })
            } else {
              // this.$message.error('添加失败，请重试！')
              self.$message({
                message: '错误！添加失败！',
                type: 'warning'
              })
            }
          }
        })
      }
    },
  }
</script>

<style scoped>
  @import "../../../assets/public/subModal.css";

  .el-dialog__wrapper >>> .el-dialog {
    width: 395px;
  }

  .el-form {
    margin: 25px auto;
    width: 320px;
  }

  .el-form-item {
    margin-bottom: 8px;
  }

  .el-dialog__wrapper >>> .el-form-item__label {
    font-size: 18px;
  }

  .el-dialog__wrapper >>> .el-input__inner {
    height: 32px;
    border: 1px solid #BBB;
  }

  .el-button {
    margin: 0 0 0 10px;
    border-radius: 8px;
    font-size: 15px;
    padding: 10px 20px;
  }
</style>
